<template>
  <div>
    <HomeRecommendTitle :tit="`热门推荐`">
      <template v-slot:Info>
        <div class="tab">
          <a href="/discover/playlist/?cat=%E5%8D%8E%E8%AF%AD" class="s-fc3">华语</a>
          <span class="line">|</span>
          <a href="/discover/playlist/?cat=%E6%B5%81%E8%A1%8C" class="s-fc3">流行</a>
          <span class="line">|</span>
          <a href="/discover/playlist/?cat=%E6%91%87%E6%BB%9A" class="s-fc3">摇滚</a>
          <span class="line">|</span>
          <a href="/discover/playlist/?cat=%E6%B0%91%E8%B0%A3" class="s-fc3">民谣</a>
          <span class="line">|</span>
          <a href="/discover/playlist/?cat=%E7%94%B5%E5%AD%90" class="s-fc3">电子</a>
        </div>
      </template></HomeRecommendTitle
    >
    <ul class="m-cvrlst clearfix" v-if="flag">
      <li v-for="item in HotR" :key="item.id">
        <SonglistNavIcon :Rdata="item" :url="routeUrl('playList', item.id, item.type, 0)">
          <template v-slot:SongInfo1>
            <p class="dec">
              <router-link
                class="tit1"
                :title="item.name"
                :to="routeUrl('playList', item.id, item.type, 0)"
              >
                <i class="u-icn icn-radio" v-if="item.type === 1 ? true : false"></i>
                {{ item.name }}</router-link
              >
            </p>
          </template></SonglistNavIcon
        >
      </li>
    </ul>
    <el-skeleton :rows="8" v-else style="height: 468px; padding-top: 20px" />
  </div>
</template>

<script>
import HomeRecommendTitle from "@/encapsulation/HomeRecommendTitle.vue";
import SonglistNavIcon from "@/encapsulation/SonglistNavIcon.vue";
import { getPersonalized, getDjprogramFn } from "@/api/index.js";
import { reactive, ref } from "vue";
import routeUrl from "@/baseFnMixin/routeUrl/RouteUrl.js";
export default {
  name: "homeHotRecommend",
  components: { HomeRecommendTitle, SonglistNavIcon },
  setup() {
    let HotR = reactive([]);
    let flag = ref(false);
    getPersonalized(5).then((response) => {
      HotR.push(...response.data.result);
      flag.value = true;
    });
    getDjprogramFn().then((response) => {
      const arr = response.data.result;
      HotR.push(...arr.slice(0, 3));
      flag.value = true;
    });

    return {
      HotR,
      flag,
      routeUrl,
    };
  },
};
</script>

<style scoped lang="less">
.tit {
  float: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
}
.tab /deep/ {
  float: left;
  margin: 7px 0 0 20px;
  .line {
    margin: 0 10px;
    color: #ccc;
  }
  a {
    &:hover {
      text-decoration: underline;
    }
  }
}

.s-bg6 {
  background-position: 0 -240px;
}

.m-cvrlst /deep/ {
  margin: 20px 0 0 -42px;
  min-height: 468px;
  li {
    float: left;
    padding: 0 0 30px 50px;
    padding-left: 42px;
    width: 140px;
    height: 204px;
    overflow: hidden;
    line-height: 1.4;
  }
  .dec /deep/ {
    margin: 8px 0 3px;
    font-size: 14px;
  }

  .tit1 /deep/ {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    &:hover {
      text-decoration: underline;
    }
  }
  .icn-radio /deep/ {
    display: inline-block;
    position: relative;
    top: -1px;
    margin-top: -1px;
    margin-right: 3px;
    vertical-align: middle;
    width: 35px;
    height: 15px;
    background-position: -31px -658px;
  }
}
</style>
